<template>
  <div style="border: 1px soild red">
    <el-button type="text" @click="addproduct" style="font-size: larger"> 添加商品 </el-button>
    <el-dialog
      title="请编辑添加的商品信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <!---------------1------------------>
      <el-form ref="form" :model="form" label-width="80px" id="myForm"  enctype="multipart/form-data">
        <el-form-item label="产品编码:">
          <el-input oninput="value=value.replace(/^\d{7}$/g,'')"
                    v-model="form.productCode" placeholder="请输入产品编码(6位)" style="width: 250px" ></el-input>
        </el-form-item>
        <!---------------2------------------>
        <el-form-item label="产品品牌:">
          <el-select v-model="form.brandId"  placeholder="请选择产品品牌" style="width: 250px">
            <el-option
              v-for="(item) in brandList"
              :key="item.brandId"
              :label="item.brandName"
              :value="item.brandId">
            </el-option>
          </el-select>
        </el-form-item>
        <!---------------3------------------>
        <el-form-item label="产品名称:" >
          <el-input v-model="form.productName" placeholder="请输入产品名称" style="width: 250px"></el-input>
        </el-form-item>
        <!---------------4------------------>
        <el-form-item label="产品单价:" >
          <el-input v-model="form.productPrice" placeholder="请输入产品名称" style="width: 250px"></el-input>
        </el-form-item>
        <!---------------5------------------>
        <el-form-item label="产品品类:">
          <el-select v-model="form.categoryId"  placeholder="请选择产品品类" style="width: 250px">
            <el-option
              v-for="(item) in categoryList"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId">
            </el-option>
          </el-select>
        </el-form-item>
        <!---------------6------------------>
        <el-form-item label="产品规格:">
          <el-select v-model="form.scfcId"  placeholder="请选择产品规格" style="width: 250px">
            <el-option
              v-for="(item) in scfcList"
              :key="item.scfcId"
              :label="item.scfcName"
              :value="item.scfcId">
            </el-option>
          </el-select>
        </el-form-item>
        <!---------------7------------------>
        <el-form-item label="产品重量:" >
          <el-input oninput="value=value.replace(/[^\d]/g)" v-model="form.height" placeholder="请输入产品重量 (kg)" style="width: 250px"></el-input>
        </el-form-item>
        <!---------------8------------------>
        <el-form-item label="产品描述:" >
          <el-input v-model="form.productDescribe" placeholder="请输入产品描述" style="width: 250px"></el-input>
        </el-form-item>
        <!---------------9------------------>
        <el-form-item label="产品数量:" >
          <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="form.productRepertory" placeholder="请输入产品数量" style="width: 250px"></el-input>
        </el-form-item>
        <!---------------10------------------>
        <el-form-item label="图片上传" >
          <!--        <input type="file" @change="getFile($event)" name="images">-->
          <input type="file"  name="file" @change="getFile($event)">
          <img :src="src" v-if="src" style="height: 150px;width: 150px;" alt="">
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即添加</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogVisible: false,
      brandList: [],
      scfcList: [],
      categoryList: [],
      imageUrl: '',
      file: '',
      src: '',
      form: {
        productCode: '',
        brandId: '',
        productName: '',
        productPrice: '',
        scfcId: '',
        categoryId: '',
        height: '',
        productDescribe: '',
        productRepertory: ''
      }
    }
  },
  methods: {
    addproduct () {
      this.dialogVisible = true
      this.$axios.post('product/queryBrand', { limit: 99, page: 1 })
        .then((res) => {
          // window.console.log(res.data.data);
          this.brandList = res.data.data
        })
      this.$axios.post('product/querySpecification', { limit: 99, page: 1 })
        .then((res) => {
          this.scfcList = res.data.data
        })
      this.$axios.post('product/queryCategory', { limit: 99, page: 1 })
        .then((res) => {
          this.categoryList = res.data.data
        })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      return isJPG && isLt2M
    },
    onSubmit (event) {
      event.preventDefault()
      this.dialogVisible = false
      let data = new FormData()
      window.console.log(data)
      window.console.log(this.file)
      data.append('productCode', this.form.productCode)
      data.append('brandId', this.form.brandId)
      data.append('productName', this.form.productName)
      data.append('productPrice', this.form.productPrice)
      data.append('scfcId', this.form.scfcId)
      data.append('categoryId', this.form.categoryId)
      data.append('height', this.form.height + 'kg')
      data.append('productDescribe', this.form.productDescribe)
      data.append('productRepertory', this.form.productRepertory)
      data.append('images', this.file)
      this.$axios.post('product/addProductInfo', data)
        .then((res) => {
          window.console.log(res)
        })
    },
    getFile () {
      var windowURL = window.URL || window.webkitURL
      this.file = event.target.files[0]
      this.src = windowURL.createObjectURL(event.target.files[0])
    }
  }
}
</script>
<style>

</style>
